<template>
    <div id="SeatList">
<!--        <span v-if="this.$route.query.classroomId">classroomId接收的Id为 {{ this.$route.query.classroomId }}</span>
        <span v-else>消息：{{ msg }}</span> -->

        <!-- <img src="@/assets/desk.svg" alt=""> -->
        <!-- <br><br>{{img1src}}<br> -->
        <van-grid :column-num="6" :border="false" :clickable="true">
            <!--          <van-grid-item v-for="value in 6" icon="user-o" :key="value" text="文字" >
             <van-icon name="@/assets/desk.svg" />
          </van-grid-item> -->
          
            <van-grid-item v-for="e in seatList"  :icon=" e.state == 10 ? 'cross' : 'user-o' " :key="e.id" 
                :text="e.abbreviation" :to="{path:'seat', query: {sid: e.id}}" :style="{ 'color': (e.state == 10 ? '#A7419E' : '#1989FA') }" />
                
<!--                <van-grid-item v-for="e in seatList" :key="e.id" 
                    :to="{path:'seat', query: {sid: e.id}}">
                    <van-icon name="fire-o" color="#ee0a24" />
                </van-grid-item> -->
        </van-grid>

    </div>
</template>

<script>
    export default {
        name: 'SeatList',
        data() {
            return {
                sid: '',
                msg: '',
                img1src: '@/assets/desk.svg',
                seatList: [],
            }
        },
        methods: {
            loadSeatList() {
                let that = this;
                this.$axios.get('/api/seatlist/seat/classroomWithReservation/' + this.$route.query.classroomId)
                    .then(function(response) {
                        // console.log("Success", response);
                        // 解析数据
                        // console.log("log2", response.data.data);
                        that.seatList = response.data.data;
                    })
                    .catch(function(error) {
                        console.log(error);
                    });
            }

        },
        mounted() {
            if (this.$route.query.classroomId == undefined || this.$route.query.classroomId == '')
                this.msg = '参数有误';
            else
            	this.loadSeatList();
            
        }
    }
</script>

<style>
</style>
